<template>
    <div>
        <!-- 表格部分 -->
        <el-card style="margin-top:10px">
            <div style="margin-bottom:5px">
                <el-button type="danger" plain size="small" :disabled="multiple"><el-icon><DeleteFilled /></el-icon>删除</el-button>
                <el-button type="success" plain size="small"><el-icon><Download /></el-icon>保存内容</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="50" />
                <el-table-column prop="field" label="字段" />
                <el-table-column prop="type" label="数据类型" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="isShow" label="显示">
                    <template #default="{row}">
                        <el-checkbox v-model="row.isShow" true-value="1" false-value="0" size="large" />
                    </template>
                </el-table-column>
                <el-table-column label="操作选项">
                    <template #default="{row}">
                        <el-button link plain type="primary" size="small" @click="onRevocation(row)"><el-icon><Delete /></el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>
    </div>
</template>

<script  setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const ids = ref([])
const multiple = ref(true)
const total = ref(50)
const selectable = ref()
const tableData = [
    {
        field: 'name',
        type: '字符串文本',
        name: '栏目名称',
        isShow: '1'
    },
    {
        field: 'path',
        type: '整型文本',
        name: '访问路径',
        isShow: '0'
    },
    {
        field: 'title',
        type: '字符串文本',
        name: 'meta标题',
        isShow: '1'
    },
    {
        field: 'keywords',
        type: '字符串文本',
        name: '字符串文本',
        isShow: '0'
    }
]

const queryParams = ref({
        pageNum: 1,
        pageSize: 10
})

const getList = () => {
    console.log('getList', queryParams.value)
}

// 删除
const onRevocation = () => {
    ElMessageBox.confirm(
    '您确定要删除这条数据吗？',
    '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
    .then(() => {
        ElMessage({
        type: 'success',
        message: 'Delete completed'
        })
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除'
        })
    })
}

const handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.date)
    multiple.value = !selection.length
}
</script>

<style lang="scss" scoped>
::v-deep{
    .el-table {
    .el-table__header-wrapper{
        th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
        }
    }
    }
}
::v-deep{
    .el-form {
    .el-form-item{
        .el-form-item__label {
            font-weight: bold !important;
        }
    }
    }
}

::v-deep{
    .el-form {
    .el-form-item .second_label{
        .el-form-item__label {
            font-weight: normal !important;
            margin-top: 10px;
        }
    }
    }
}
::v-deep{
.second_label{
        .el-form-item__error {
            position: static !important
        }

    }
}

::v-deep{
    .tree-border {
        margin-top: 5px;
        border: 1px solid #e5e6e7;
        background: #fff none;
        border-radius:4px;
        width: 100%;
    }
}

</style>
